<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100px;height: 100px;background: #ccc;position: absolute;top: 0;left: 0;
        }
        .line{
            width: 3px;height: 500px; background: blue;position: absolute;top: 0;left: 500px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="line"></div>
</body>
<script>
    var obox=document.querySelector(".box");
    
    let timer;

    obox.onclick=function(){
        move(obox,"left",500)
    }

    function move(ele,attr,target){
        clearInterval(timer);
        timer=setInterval(function(){
            // 获取当前值（使用获取非行内样式的方式获取当前值，通用）
            let now = parseInt(getStyle(ele, attr));
            let speed = (target - now) / 7;
            // 根据正负值，决定向上或向下取整
            speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
            if(target===now){
                clearInterval(timer);
                ele.style[attr]=target + "px";
            }else{
                ele.style[attr]=now + speed + "px"
            }
        },30)
    }

    // 获取非行内样式的兼容处理
    function getStyle(ele,attr){
        if(ele.currentStyle){
            return ele.currentStyle[attr]
        }else{
            return getComputedStyle(ele)[attr]
        }
    }

</script>
</html>